<template>
  <div class="order">
    <div v-if="!roleOperation">
      <div style="display: flex; justify-content: space-between">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="单位名称">
            <el-input v-model="formInline.companyName"></el-input>
          </el-form-item>
          <el-form-item label="单位类型">
            <el-select v-model="value1" placeholder="请选择">
              <el-option
                v-for="item in data2"
                :value="item.value"
                :label="item.label"
                :disabled="item.disabled"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="模板名称">
            <el-input v-model="formInline.temName"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchList">查询</el-button>
            <el-button type="default" @click="resetFormConditions">重置</el-button>
            <el-button type="primary" @click="addRole" class="addBtn">新增</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="tables">
        <el-table ref="multipleTable" :data="tables" tooltip-effect="dark" style="width: 100%">
          <el-table-column type="index" label="序号" width="50"></el-table-column>
          <el-table-column prop="companyName" label="单位名称"></el-table-column>
          <el-table-column prop="companyTypeName" label="单位类型"></el-table-column>
          <el-table-column prop="temName" label="模板名称"></el-table-column>
          <el-table-column prop="temDescription" label="模板描述"></el-table-column>
          <el-table-column prop="temTypeName" label="模板类型"></el-table-column>
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button @click="handleViewRole(scope.row)" type="text" size="small">预览</el-button>
              <el-button @click="handleEdit(scope.row)" type="text" size="small">下载</el-button>
              <el-button type="text" size="small" @click="deleteRole(scope.row)">删除</el-button>
              <el-button type="text" size="small" @click="revamp(scope.row)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>

      <el-dialog title="模板新增" :visible.sync="dialogVisible" size="tiny">
        <el-form :model="templateForm" class="templateFroms">
          <el-form-item label="单位类型" prop="companyType" label-width="100px">
            <el-select v-model="values" disabled placeholder="请选择">
              <el-option
                v-for="item in templateForm.options"
                :value="item.value"
                :label="item.label"
                :disabled="item.disabled"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="单位名称" prop="companyName" label-width="100px">
            <!--<el-input-->
              <!--:disabled="true"-->
              <!--clearable-->
              <!--v-model="templateForm.companyName"-->
              <!--placeholder="单位名称"-->
            <!--&gt;</el-input>-->
            <InputSearch @changes="getCompanyId" :val="defaultValue"/>
          </el-form-item>
          <el-form-item label="模板名称" prop="temName" label-width="100px" ref="confirmPassword">
            <el-input type="text" clearable v-model="templateForm.temName" placeholder="请输入模板名称"></el-input>
          </el-form-item>
          <el-form-item label="模板描述" prop="describe" label-width="100px" ref="confirmPassword">
            <el-input
              type="textarea"
              clearable
              v-model="templateForm.temDescription"
              placeholder="请输入模板描述"
            ></el-input>
          </el-form-item>
          <el-form-item label="模板上传" prop="temAddress" label-width="100px" ref="confirmPassword">
            <el-upload
              class="upload-demo"
              ref="upload"
              :action="url"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-error="handleerror"
              :auto-upload="false"
              list-type="picture"
              accept=".pdf"
              multiple
              :limit="3"
              :headers="myHeaders"
            >
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <el-button
                style="margin-left: 10px;"
                size="small"
                type="success"
                @click="submitUpload"
              >上传到服务器</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="saveUpload">保 存</el-button>
          <el-button type="primary" @click="saveAbolish">取 消</el-button>
        </div>
      </el-dialog>

      <el-dialog title="模板修改" :visible.sync="revampVisible" size="tiny">
        <el-form :model="revampForm" class="templateFroms">
          <el-form-item label="单位类型" prop="companyType" label-width="100px">
            <el-select v-model="values" disabled placeholder="请选择">
              <el-option
                v-for="item in revampForm.options"
                :value="item.value"
                :label="item.label"
                :disabled="item.disabled"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="单位名称" prop="companyName" label-width="100px">
            <el-input
              :disabled="true"
              clearable
              v-model="revampForm.companyName"
              placeholder="单位名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="模板名称" prop="temName" label-width="100px" ref="confirmPassword">
            <el-input type="text" clearable v-model="revampForm.temName" placeholder="请输入模板名称"></el-input>
          </el-form-item>
          <el-form-item label="模板描述" prop="describe" label-width="100px" ref="confirmPassword">
            <el-input
              type="textarea"
              clearable
              v-model="revampForm.temDescription"
              placeholder="请输入模板描述"
            ></el-input>
          </el-form-item>
          <el-form-item label="模板上传" prop="temAddress" label-width="100px" ref="confirmPassword">
            <el-upload
              class="upload-demo"
              ref="upload"
              action="http://192.168.1.114:8088/userFile/upload?companyId=`${templateForm.companyType}`"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-error="handleerror"
              :auto-upload="false"
              list-type="picture"
              accept=".pdf"
              multiple
              :limit="10"
            >
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <el-button
                style="margin-left: 10px;"
                size="small"
                type="success"
                @click="submitUpload"
              >上传到服务器</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="saveUpload">保 存</el-button>
          <el-button type="primary" @click="saveAbolish">取 消</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 查看预览 -->
    <div class="addRole" v-if="roleOperation">
      <div style="margin-bottom: 20px;">
        <el-button type="text" size="medium" @click="goBack">返回</el-button>
        <div class="pdf">
          <iframe id="show-iframe" :src="pdf">
            This browser does not support PDFs. Please download the PDF to view it:
            <a
              href="/test.pdf"
              rel="external nofollow"
            >Download PDF</a>
          </iframe>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import InputSearch from "@/components/InputSearch/InputSearch";
  export default {
  inject: ["reload"],
  data() {
    return {
      myHeaders: {
        token: localStorage.nc_token
      },
      // 新增
      dialogVisible: false,
      defaultValue: "",
      templateForm: {
        options: [
          {
            value: 1,
            label: "产废单位",
            disabled: true
          },
          {
            value: 2,
            label: "处置单位",
            disabled: true
          },
          {
            value: 3,
            label: "运输单位",
            disabled: true
          },
          {
            value: 4,
            label: "运营单位",
            disabled: true
          },
          {
            value: 5,
            label: "监管单位",
            disabled: true
          },
          {
            value: 6,
            label: "管理员",
            disabled: true
          },
          {
            value: 7,
            label: "处置与运营单位",
            disabled: true
          }
        ],
        companyId:"",
        companyType: "",
        companyName: "",
        temName: "",
        temDescription: "",
        temAddress: ""
      },
      values: "",
      //pdf
      pdf: "",
      // 操作
      tables: [],
      //查询
      value1: "",
      data2: [
        {
          value: 2,
          label: "处置单位"
        },
        {
          value: 4,
          label: "运营单位"
        },
        {
          value: 7,
          label: "处置与运营单位"
        }
      ],
      formInline: {
        companyName: "",
        companyType: "",
        temName: ""
      },
      currentPage: 1,
      total: 10,
      page: 1,
      limit: 10,
      roleOperation: false,
      revampVisible: false,
      revampForm: {
        options: [
          {
            value: 1,
            label: "产废单位",
            disabled: true
          },
          {
            value: 2,
            label: "处置单位",
            disabled: true
          },
          {
            value: 3,
            label: "运输单位",
            disabled: true
          },
          {
            value: 4,
            label: "运营单位",
            disabled: true
          },
          {
            value: 5,
            label: "监管单位",
            disabled: true
          },
          {
            value: 6,
            label: "管理员",
            disabled: true
          },
          {
            value: 7,
            label: "处置与运营单位",
            disabled: true
          }
        ],
        companyType: "",
        companyName: "",
        temName: "",
        temDescription: "",
        temAddress: ""
      },
      url:""
    };
  },
  mounted() {
    this.init();
    this.searchResult();
  },
  methods: {
    //初始化
    init() {

      this.templateForm.companyName = localStorage.companyName;
      this.templateForm.companyType = localStorage.companyType;
      this.templateForm.options.forEach(item => {
        if (this.templateForm.companyType == item.value) {
          this.values = item.label;
        } else {
          return;
        }
      });
    },
    //文件上传
    submitUpload() {
      if(!this.templateForm.companyId){
        this.$message({
          type: "success",
          message: "请添加公司"
        });
        return
      }else {
        this.url="http://192.168.1.114:8088/userFile/upload?companyId="+`${this.templateForm.companyId}`
        this.$refs.upload.submit();
      }
    },
    handleRemove(file) {
      console.log(file);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleerror(err, file) {
      console.log(err);
      console.log(file);
    },
    //保存模板
    saveUpload() {
      this.$common
        .$ajax(
          "/contractTemplet/add",
          {
            limit: this.limit,
            page: this.page,
            companyName: this.templateForm.companyName,
            companyType: Number(this.templateForm.companyType),
            temName: this.templateForm.temName,
            temDescription: this.templateForm.temDescription,
            temAddress:
              "http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf",
            temType: 2
          },
          "post"
        )
        .then(res => {
          console.log(res.data.status);
          if (res.data.status === 200) {
            this.$message({
              type: "success",
              message: "添加成功"
            });
            this.searchResult();
            this.dialogVisible = false;
          } else {
            this.$message.error("错了哦，添加错误");
          }
        });
    },
    saveAbolish() {
      console.log(1);
    },

    searchResult() {
      this.$common
        .$ajax(
          "/contractTemplet/selectByCondition",
          {
            limit: this.limit,
            page: this.page
          },
          "get"
        )
        .then(res => {
          if (res.status == 200) {
            res.data.page.list.forEach(item => {
              switch (item.companyType) {
                case 1:
                  item.companyTypeName = "产废单位";
                  break;
                case 2:
                  item.companyTypeName = "处置单位";
                  break;
                case 3:
                  item.companyTypeName = "运输单位";
                  break;
                case 4:
                  item.companyTypeName = "运营单位";
                  break;
                case 5:
                  item.companyTypeName = "监管单位";
                  break;
                case 6:
                  item.companyTypeName = "管理员";
                  break;
                case 7:
                  item.companyTypeName = "处置与运营单位";
                  break;
                default:
                  item.companyTypeName = "未知";
              }
              switch (item.temType) {
                case 1:
                  item.temTypeName = "运营模板";
                  break;
                case 2:
                  item.temTypeName = "处置模板";
                  break;
                default:
                  item.temTypeName = "未知";
              }
            });
            this.tables = res.data.page.list;
          }
        });
    },
    //查询
    searchList() {
      console.log(this.formInline);
      this.$common
        .$ajax(
          "/contractTemplet/selectByCondition",
          {
            limit: this.limit,
            page: this.page,
            companyName: this.formInline.companyName,
            companyType: this.formInline.companyType,
            temName: this.formInline.temName
          },
          "get"
        )
        .then(res => {
          if (res.status == 200) {
            res.data.page.list.forEach(item => {
              switch (item.companyType) {
                case 1:
                  item.companyTypeName = "产废单位";
                  break;
                case 2:
                  item.companyTypeName = "处置单位";
                  break;
                case 3:
                  item.companyTypeName = "运输单位";
                  break;
                case 4:
                  item.companyTypeName = "运营单位";
                  break;
                case 5:
                  item.companyTypeName = "监管单位";
                  break;
                case 6:
                  item.companyTypeName = "管理员";
                  break;
                case 7:
                  item.companyTypeName = "处置与运营单位";
                  break;
                default:
                  item.companyTypeName = "未知";
              }
              switch (item.temType) {
                case 1:
                  item.temTypeName = "运营模板";
                  break;
                case 2:
                  item.temTypeName = "处置模板";
                  break;
                default:
                  item.temTypeName = "未知";
              }
            });
            this.tables = res.data.page.list;
          }
        });
      // this.searchResult()
    },
    handleSizeChange(val) {
      this.limit = val;
      this.searchResult();
    },
    //页数
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      this.searchResult();
    },
    //重置
    resetFormConditions() {
      this.formInline = {
        companyName: "",
        companyType: "",
        temName: ""
      };
      this.searchResult();
    },
    addRole() {
      this.dialogVisible = true;
    },
    //预览
    handleViewRole(row) {
      console.log(row.temAddress);
      this.pdf = row.temAddress;
      // this.pdf = 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf'
      this.roleOperation = true;
    },
    //下载
    handleEdit(row, type) {
      this.$confirm("是否下载此模板？, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(() => {
          window.open(row.temAddress);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    //返回
    goBack() {
      this.reload();
    },
    //删除
    deleteRole(row) {
      console.log(row.id);
      this.$confirm("是否确认删除模板？, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(() => {
          this.$common
            .$ajax(
              "/contractTemplet/delete",
              {
                id: Number(row.id)
              },
              "get"
            )
            .then(res => {
              this.$message({
                message: "删除成功",
                type: "success",
                duration: 1000
              });
              this.searchResult();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    //修改
    revamp(row) {
      console.log(row);

      this.revampVisible = true;
    },
    getCompanyId(val) {
      this.templateForm.companyId = val[0].value;
    },
  },
  components: {
    InputSearch
  }
};
</script>
<style lang="scss">
.order {
  padding-top: 30px;
}

.tables {
  margin-top: 20px;
}

.addBtn {
  height: 40px !important;
}

.wrapper {
  display: flex;
  justify-content: space-between;

  .menuListTree {
    width: 50%;
  }

  .roleViews {
    width: 50%;
  }
}
.templateFroms .el-input.is-disabled .el-input__inner {
  color: #606266 !important;
}
.pdf {
  width: 100%;
  height: calc(100vh - 20vh);
}
.pdf iframe {
  width: 100%;
  height: 100%;
}
</style>
